<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyMusic</title>
    <style>@import "css/Mymusic.css";</style>
</head>
<body>
<div id="mymusicT">
    <div class="top">
        <input type="text" class="searchText">
        <input type="button" value="搜索" class="dosearch">

    </div>
    <div class="middle">
        <div class="musicList">
            <ul>
                <li v-for="(item, index) in musicList">
                    <img @click="playMusic(item,index)" style="width: 20px;margin-right:5px;vertical-align: middle"
                         v-bind:src="currentIndex==index?'img/music_start.png':'img/music_stop.png'">
                    <span>{{item.musicName}}</span>
                </li>
            </ul>
        </div>
        <div class="musicInfor">
            <div class="musicInfor_img">
                <img src="img/one.jpg" class="music_img"
                v-bind:style="{animationPlayState:musicPlayState?'running':'paused'}">
            </div>
            <div class="musicInfor_word">
                <ul>
                    <li v-for="item in wordsArray">
                        {{item.word}}
                    </li>
                </ul>

            </div>

        </div>

    </div>
    <div class="bottom">
        <audio ref="myaudio" v-bind:src="musicPath" id="myaudio1" autoplay controls>
        </audio>

    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.main.js"></script>
<script>
    var basepath="http://www.softeem.xin:8888/public/musicData/";
    var myMusic = new Vue({
        el:"#mymusicT",
        data:{
            musicList:[],
            musicPath:"",
            musicPlayState:false,
            currentIndex:-1,
            wordsArray:[],

        },
        methods:{
            playMusic:function (music, index) {
                if(!this.musicPlayState){
                    var path = basepath + music.musicPath;
                    this.musicPath = path;
                    this.$refs.myaudio.play();
                    this.currentIndex=index;
                    this.getMusicWord(music.lrcPath);
                }
                else {
                    this.$refs.myaudio.pause();
                    this.currentIndex=-1;
                }
                this.musicPlayState = !this.musicPlayState;
            },

            getMusicList:function () {
                axios.get(basepath+"musicData.json")
                    .then((result)=>{
                        if(result!=null)
                            this.musicList=result.data;
                    })
                    .catch()

            },

            getMusicWord:function(lrcPath){
                axios.get(basepath+lrcPath)
                    .then((result)=>{
                        var words = result.data.split("\n");
                        this.wordsArray=[];
                        for(var i=0;i<words.length;i++){
                            var time = words[i].substring(1,10);
                            var word = words[i].substring(11,words[i].length);
                            this.wordsArray.push({'time':time,'word':word});
                        }

                    }).catch()

            },

        },
        created(){
            this.getMusicList();
        }


    })
</script>
</body>
</html>